<script lang="ts">
import { RouterLink } from "vue-router";
//解决MessageApi.vue中的useMessage()报错
import { NMessageProvider } from "naive-ui";
import { defineComponent, ref } from "vue";
import {
  NSpace,
  NLayout,
  NLayoutFooter,
  NMenu,
  NLayoutSider,
  NLayoutHeader,
} from "naive-ui";
import { menuOptions } from "@/views/Home/homeColumns";

export default defineComponent({
  components: {
    NSpace,
    NLayout,
    NLayoutFooter,
    NMenu,
    NLayoutSider,
    NLayoutHeader,
    NMessageProvider,
    //
    RouterLink,

  },
  setup() {
    return {
      inverted: ref(false),
      menuOptions,
    };
  },
});
</script>

<template>
  <n-message-provider>
    <div class="app">
      <div class="top"></div>
      <div class="content">
        <n-layout has-sider class="content-table">
          <n-layout-sider
            bordered
            show-trigger
            collapse-mode="width"
            :collapsed-width="64"
            :width="240"
            :native-scrollbar="false"
            :inverted="inverted"
          >
            <n-menu
              :inverted="inverted"
              :collapsed-width="64"
              :collapsed-icon-size="22"
              :options="menuOptions"
            />
          </n-layout-sider>
          <n-layout>
            <div class="form-table">
              <router-view />
            </div>
          </n-layout>
        </n-layout>
      </div>
    </div>
  </n-message-provider>
</template>

<style scoped lang="less">
@width: 100vw;
@height: 100vh;
.app {
  width: @width;
  height: @height;

  .top {
    width: @width;
    height: 38px;
    background-color: #438ff7;
  }
  .content {
    height: calc(100% - 38px);
    width: @width;
    .content-table {

      height: 100%;
      width: 100%;
      .form-table {
        height: 100%;
        width: 100%;
        background-color: #f6f6f7;
      }
    }
  }
}
</style>
